<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" :title="addEditName + title" :visible.sync="dialogVisible" width="50%"
        :before-close="handleClose">
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="告警类别名称:" prop="alarmTypeName">
                <el-input v-model="ruleForm.alarmTypeName" class="w100p" clearable />
            </el-form-item>
            <el-form-item label="告警类别描述:" prop="describe">
                <el-input v-model="ruleForm.describe" class="w100p" clearable />
            </el-form-item>
            <el-form-item v-if="addEditFlag === 'add' || addEditFlag === 'edit'" label="数据类型选择" prop="nowdataType">
                <el-select v-model="nowdataType" class="w100p" clearable multiple @change="addDataType">
                    <el-option v-for="(item, index) in dataTypeList" :key="item.dataTypeId" :value="item.dataTypeId"
                        :label="item.dataTypeName" />
                </el-select>
            </el-form-item>
            <el-form-item label="所关联数据类型:">
                <span v-show="showdatatypeList.length == 0">请选择数据项类型！</span>
                <div class="contact-view w100p">
                    <div v-for="(item, index) in showdatatypeList" :key="index" class="contact-view-but"
                        @click="delDataType(index)">
                        {{ item.dataTypeName }}
                        <i v-if="addEditFlag === 'add' || addEditFlag === 'edit'" class="el-icon-close"></i>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import alarmCategoryManagement from '@/api/monitoringAlarmManagement/alarmCategoryManagement.js';
export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (this.nowdataType === null || this.nowdataType.length === 0) {
                callback(new Error("请输入选择数据类型"));
            } else {
                callback();
            }
        };
        return {
            addEditName: '添加',
            addEditApi: '',
            ruleForm: {},
            dataTypeList: [],
            nowdataType: [],
            showdatatypeList: [],
            rules: {
                alarmTypeName: [
                    { required: true, message: "请输入告警类别名称", trigger: "blur" }
                ],
                describe: [
                    { required: true, message: "请输入告警类别描述", trigger: "blur" }
                ],
                nowdataType: [
                    { required: true, validator: validatePass, trigger: "change" }
                ]
            },
        }
    },
    computed: {

    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },
    
    mounted() { },
    methods: {
        initData() {
            this.getselectlist();
            if (this.addEditFlag == 'add') {
                this.resetForm()
                this.addEditApi = alarmCategoryManagement.add
                this.addEditName = '添加'
            } else if (this.addEditFlag == 'edit') {
                this.ruleForm = { ...this.data }
                this.addEditApi = alarmCategoryManagement.edit
                this.ruleForm.alarmTypeDataTypeMapperList.forEach((el) => {
                    this.nowdataType.push(el.dataTypeId)
                });
                this.showdatatypeList = this.ruleForm.alarmTypeDataTypeMapperList;
                this.addEditName = '编辑'
            }
        },
        // 添加一条数据类别
        addDataType(e) {
            this.showdatatypeList = []
            e.forEach(item => {
                this.dataTypeList.forEach(el => {
                    if (el.dataTypeId === item) {
                        let addData = {
                            dataTypeId: el.dataTypeId,
                            dataTypeName: el.dataTypeName
                        };
                        this.showdatatypeList.push(addData);
                    }
                })
            })
        },
        // 删除一条数据
        delDataType(index) {
            this.showdatatypeList.splice(index, 1);
            this.nowdataType.splice(index, 1)
        },
        // 获取下拉数据
        getselectlist() {
            // 获取所有数据类型
            alarmCategoryManagement.getalldatalist().then((res) => {
                this.dataTypeList = res.data;
            });
        },
        //提交表单
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = {};
                    params = { ...this.ruleForm };
                    params['alarmTypeDataTypeMapperList'] = [];
                    this.nowdataType.forEach(el => {
                        this.dataTypeList.forEach(item => {
                            if (item.dataTypeId === el) {
                                let obj = {
                                    dataTypeId: item.dataTypeId,
                                    dataTypeName: item.dataTypeName
                                }
                                params['alarmTypeDataTypeMapperList'].push(obj)
                            }
                        })
                    })
                    this.addEditApi({ ...params }).then(res => {
                        let msg = res.code == 1 ? '操作成功' : '操作失败'
                        this.$message[res.code == 1 ? 'success' : 'warning'](res.msg || msg)
                        res.code == 1 && this.cancel();
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.dataTypeList = [];
            this.nowdataType = [];
            this.showdatatypeList = [];
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.contact-view {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .contact-view-but {
        padding: 5px 30px;
        margin-bottom: 5px;
        margin-right: 5px;
        background-color: #4083bb;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            background-color: #1e3d57;
        }
    }
}
</style>
  